Возьмём картинку с геометрическими фигурами, расположенную в шапке нашего сайта. Сделаем из нее навигационную карту, т.е. при щелчке по каждой геометрической фигуре будет осуществляться переход на страницу, посвящённую шару, пирамиде или параллелепипеду. Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используется тег <map> с единственным параметром name, который задаёт имя карты-ссылок.

<map name="navigation chart">
</map>

Подключим карту к картинке, для этого в тег <img> добавим параметр usemap, в качестве значения которого выступает имя нашей карты после значка # (решетки).

<img src="figyra.jpg" align="right" width="300" height="183" usemap="#navigation chart" border="0">

Для описания конкретных областей используется тег <area>. Этот тег имеет следующие параметры:
1) shape - определяет форму области ( rect - область в виде прямоугольника, circle - область в виде круга, poly - область в виде многоугольника, default - вся область).
2) cootds - задает координаты отдельной области (для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника, для circle задаются координаты центра круга и радиус, для poly задаются координаты вершин многоугольника в нужном порядке).
3) href - определяет адрес ссылки.
4) title - задает всплывающую подсказку.

<area shape="rect" coords="30,120, 100,180"
href="#" title="Шар">

У нас три области: первая - прямоугольная область вокруг шара (лиловые линии), вторая - прямоугольная область вокруг пирамиды (коричневые линии), третья - прямоугольная область вокруг параллелепипеда (голубые линии). Определим координаты этих областей, т.е. зададим координаты верхнего левого и нижнего правого углов трех прямоугольников "методом подбора".

Теперь наши области стали ссылками.